<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate.css">
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_md.css">
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_sm.css">
    <link rel="stylesheet" href="TemplateUI/BottomTemplate/BottomTemplate.css">
    <link href="css/user_Center_md.css" rel="stylesheet">
    <link href="css/user_Center_sm.css" rel="stylesheet">
</head>
<body>
<!--头部导航栏，响应式，最小宽度768-->
<div class="nav">
    <a class="logo_Astray">Astray</a>
    <ul class="nav_ul">
        <a href="index.html"><li class="nav_li nav_action">首页</li></a>
        <a href="article_Index.html"><li class="nav_li">文章</li></a>
        <a href="question_Index.html"><li class="nav_li">问答</li></a>
        <a href="test_Index.html"><li class="nav_li">测试</li></a>
        <a href="FM_Index.html"><li class="nav_li">FM</li></a>
        <li class="nav_menu">
            <ul class="nav_drop">
                <li class="item">更多<span class="triangle"></span></li>
                <a href="interact_List.html"><li class="item">动态</li></a>
                <a href="activity_List.html"><li class="item">活动</li></a>
            </ul>
        </li>
    </ul>
    <ul class="nav_ul_info">
        <li class="nav_ul_info_li">
            <a  class="nav_ul_info_img" href="user_Center.html">
                <img src="img/headPhoto.png" width="2rem">
            </a>
            <div id="user_infoBox">
                <ul>
                    <li>
                        文章<br/>
                        <span>11</span>
                    </li>
                    <li>
                        提问<br/>
                        <span>11</span>
                    </li>
                    <li>回答<br/>
                        <span>11</span>
                    </li>
                    <li>收藏<br/>
                        <span>11</span>
                    </li>
                </ul>
                <dl>
                    <dt>称号：</dt>
                    <dd><img src="img/jia.png" alt=""></dd>
                    <dd><img src="img/jia.png" alt=""></dd>
                </dl>
                <div>
                    <a>签到</a>
                    <a href="user_Info_baseInfo.html">前往个人信息>>></a>
                </div>
            </div>

        </li>
        <li class="nav_ul_info_li"><a onclick="javascript:window.open('user_chat.html','chat','top=100%,left=100%,status=no,location=no,menubar=no, scrollbars=no,')">消息</a></li>
        <li class="nav_ul_info_li"><a href="user_Info_systemMessage.html">通知</a></li>
    </ul>
</div>


<!--个人中心主体内容-->
<div class="main">
    <!--主体左，包含用户名片，以及用户的资源-->
    <div class="leftBody">
        <!--用户名片-->
        <div class="userCard">
            <!--用户头像-->
            <div class="headPhoto">
                <img src="img/headPhoto.png" alt="">
            </div>
            <!--用户信息-->
            <div class="userInfo">
                <!--用户名-->
                <div class="userInfo_userName">
                    迷途者
                </div>
                <!--用户称号,称号图片暂时使用其他代替-->
                <div class="userInfo_title">
                    <img src="img/courier.png" alt="称号大师" title="称号大师">
                    <img src="img/courier.png" alt="">
                    <img src="img/courier.png" alt="">
                </div>
                <!--用户简介-->
                <div class="userInfo_intro">
                    <img src="img/courier.png" alt="">
                    <div>阿瑟if加速度计爱神的箭啊盛开的积分按时间爱神的箭发傻大姐萨达就萨迪克啊大
                        萨达阿斯蒂阿斯蒂阿斯蒂萨达阿斯顿发送到阿斯蒂芬阿斯蒂芬阿斯蒂萨达士大夫阿斯蒂发的飞
                    </div>
                </div>
            </div>
            <!--清除浮动，自动撑高div-->
            <div style="clear: both"></div>
        </div>
        <!--用户资源-->
        <div class="userResources">
            <div class="tabList">
                <span class="tab action" onclick="changeTab(0)">主页</span>
                <span class="tab" onclick="changeTab(1)">文章</span>
                <span class="tab" onclick="changeTab(2)">提问</span>
                <span class="tab" onclick="changeTab(3)">回答</span>
                <span class="tab" onclick="changeTab(4)">测试</span>
                <div style="clear: both"></div>
            </div>
            <div class="tabContentList">
                <div class="tabContent">
                    <span class="module_title">主页</span>

                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="test_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="test_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="module_article">
                        <!--文章封面图片-->
                        <a href="article_Details.html"><img class="article_Pic" src="img/articlePic.png" alt=""></a>
                        <!--文章标题-->
                        <a href="article_Details.html"><span class="article_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="article_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="article_info">
                            <!--文章评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--文章浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除文章按钮-->
                        <div class="article_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="module_question">
                        <!--提问封面图片-->
                        <a href="question_Details.html"><img class="question_Pic" src="img/articlePic.png" alt=""></a>
                        <!--提问问题-->
                        <a href="question_Details.html"><span class="question_title">这是一个问答标题，这是一个问答标题</span></a>
                        <div class="question_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="question_info">
                            <!--提问评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--提问浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除提问按钮-->
                        <div class="question_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="article_page_div">
                        <ul class="article_page">
                            <li>上一页</li>
                            <li>2</li>
                            <li class="action">3</li>
                            <li>4</li>
                            <li>...</li>
                            <li>10</li>
                            <li>下一页</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                </div>

                <!--文章-->
                <div class="tabContent">
                    <span class="module_title">文章</span>
                    <div class="module_article">
                        <!--文章封面图片-->
                        <a href="article_Details.html"><img class="article_Pic" src="img/articlePic.png" alt=""></a>
                        <!--文章标题-->
                        <a href="article_Details.html"><span class="article_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="article_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="article_info">
                            <!--文章评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--文章浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除文章按钮-->
                        <div class="article_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="module_article">
                        <!--文章封面图片-->
                        <a href="article_Details.html"><img class="article_Pic" src="img/articlePic.png" alt=""></a>
                        <!--文章标题-->
                        <a href="article_Details.html"><span class="article_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="article_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="article_info">
                            <!--文章评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--文章浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除文章按钮-->
                        <div class="article_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="module_article">
                        <!--文章封面图片-->
                        <a href="article_Details.html"><img class="article_Pic" src="img/articlePic.png" alt=""></a>
                        <!--文章标题-->
                        <a href="article_Details.html"><span class="article_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="article_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="article_info">
                            <!--文章评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--文章浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除文章按钮-->
                        <div class="article_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="module_article">
                        <!--文章封面图片-->
                        <a href="article_Details.html"><img class="article_Pic" src="img/articlePic.png" alt=""></a>
                        <!--文章标题-->
                        <a href="article_Details.html"><span class="article_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="article_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="article_info">
                            <!--文章评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--文章浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除文章按钮-->
                        <div class="article_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="module_article">
                        <!--文章封面图片-->
                        <a href="article_Details.html"><img class="article_Pic" src="img/articlePic.png" alt=""></a>
                        <!--文章标题-->
                        <a href="article_Details.html"><span class="article_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="article_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="article_info">
                            <!--文章评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--文章浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除文章按钮-->
                        <div class="article_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="article_page_div">
                        <ul class="article_page">
                            <li>上一页</li>
                            <li>2</li>
                            <li class="action">3</li>
                            <li>4</li>
                            <li>...</li>
                            <li>10</li>
                            <li>下一页</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                </div>

                <!--提问-->
                <div class="tabContent">
                    <span class="module_title">提问</span>
                    <div class="module_question">
                        <!--提问封面图片-->
                        <a href="question_Details.html"><img class="question_Pic" src="img/articlePic.png" alt=""></a>
                        <!--提问问题-->
                        <a href="question_Details.html"><span class="question_title">这是一个问答标题，这是一个问答标题</span></a>
                        <div class="question_label">
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>家庭婚姻</span>
                            <span>2017-05-01 22:22:22</span>
                        </div>
                        <div class="question_info">
                            <!--提问评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--提问浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除提问按钮-->
                        <div class="question_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>
                    </div>
                    <div class="question_page_div">
                        <ul class="question_page">
                            <li>上一页</li>
                            <li>2</li>
                            <li class="action">3</li>
                            <li>4</li>
                            <li>...</li>
                            <li>10</li>
                            <li>下一页</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                </div>

                <!--回答-->
                <div class="tabContent">
                    <span class="module_title">回答</span>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="module_answer">
                        <a href="question_Details.html"><span class="answer_title">这是一个问答的标题，这是一个问答的标题</span></a>
                        <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="answer_userHead"></a>
                        <span class="answer_content">这是一个回答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是          答的内容，这是一个回答的内容，这是一个回                              答的内容这是一个回答的内容，是                              答的内容
                            </span>
                        <div class="answer_info">
                            <img src="img/good-o.png" alt="">
                            <span>123</span>
                            <span>2017-05-06 22:22:22</span>
                        </div>
                        <img src="img/delete-o.png" alt="" class="answer_delete">
                        <div style="clear: both"></div>
                    </div>
                    <div class="question_page_div">
                        <ul class="question_page">
                            <li>上一页</li>
                            <li>2</li>
                            <li class="action">3</li>
                            <li>4</li>
                            <li>...</li>
                            <li>10</li>
                            <li>下一页</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                </div>

                <div class="tabContent">
                    <span class="module_title">测试</span>

                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="question_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="question_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="question_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="question_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="question_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="question_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="question_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="question_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="question_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="question_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="module_test">
                        <!--测试封面图片-->
                        <a href="question_Details.html"><img class="test_Pic" src="img/articlePic.png" alt=""></a>
                        <!--测试标题-->
                        <a href="question_Details.html"><span class="test_title">这是一个文章标题，这是一个文章标题</span></a>
                        <div class="test_result">
                            <span>A.你是个傻逼</span>
                        </div>
                        <div class="test_info">
                            <!--测试评论量-->
                            <img src="img/chat-o.png"><span>12</span> &nbsp;
                            <!--测试浏览量-->
                            <img src="img/visible-o.png"><span>1255</span>
                        </div>
                        <!--删除测试按钮-->
                        <!--<div class="test_delete">
                            <img src="img/delete-o.png" alt="">
                        </div>-->
                    </div>
                    <div class="question_page_div">
                        <ul class="question_page">
                            <li>上一页</li>
                            <li>2</li>
                            <li class="action">3</li>
                            <li>4</li>
                            <li>...</li>
                            <li>10</li>
                            <li>下一页</li>
                        </ul>
                    </div>
                    <div style="clear: both"></div>
                </div>

            </div>
        </div>
        <div style="clear: both"></div>
    </div>

    <!--主体右，包含签到记录以及关注列表-->
    <div class="rightBody">
        <div class="sign">
            <div class="sign_month">
                <img onclick="changeMonth('-')" class="sign_back" src="img/back.png" alt="">
                <span class="sign_date">2017-10</span>
                <img onclick="changeMonth('+')" class="sign_forward" src="img/forward.png" alt="">
            </div>
            <div class="sign_day">
                <div class="sign_s">一</div><div class="sign_s">二</div><div class="sign_s">三</div><div class="sign_s">四</div><div class="sign_s">五</div><div class="sign_s">六</div><div class="sign_s">日</div>
                <div class="sign_showDay">

                </div>
            </div>


        </div>

        <div class="attention">
            <div class="attentionInfo">
                <div>
                    <p>关注</p>
                    <p>18</p>
                </div>
                <div>
                    <p>关注者</p>
                    <p>180</p>
                </div>
            </div>
            <div style="clear: both"></div>
            <span class="module_title">关注列表</span>
            <div class="attUserList">
                <div>
                    <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="attUserHeadPhoto"></a>
                </div>
                <span class="attUserName">湛江张学友</span>
                <button class="attCanel" onclick="chanelAtt(this)">取消关注</button>
            </div>
            <div class="attUserList">
                <div>
                    <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="attUserHeadPhoto"></a>
                </div>
                <span class="attUserName">湛江张学友</span>
                <button class="attCanel" onclick="chanelAtt(this)">取消关注</button>
            </div>
            <div class="attUserList">
                <div>
                    <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="attUserHeadPhoto"></a>
                </div>
                <span class="attUserName">湛江张学友</span>
                <button class="attCanel" onclick="chanelAtt(this)">取消关注</button>
            </div>
            <div class="attUserList">
                <div>
                    <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="attUserHeadPhoto"></a>
                </div>
                <span class="attUserName">湛江张学友</span>
                <button class="attCanel" onclick="chanelAtt(this)">取消关注</button>
            </div>
            <div class="attUserList">
                <div>
                    <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="attUserHeadPhoto"></a>
                </div>
                <span class="attUserName">湛江张学友</span>
                <button class="attCanel" onclick="chanelAtt(this)">取消关注</button>
            </div>
            <div class="attUserList">
                <div>
                    <a href="user_Center.html"><img src="img/headPhoto.png" alt="" class="attUserHeadPhoto"></a>
                </div>
                <span class="attUserName">湛江张学友</span>
                <button class="attCanel" onclick="chanelAtt(this)">取消关注</button>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>



<div class="bodyBottom">
    <div class="tail_boby_one">
        <div class="tail_link">
            <p>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
                <span>|</span>
                <a>关于我们</a>
            </p>

        </div>

        <div class="tail_net_police">
            <p>版权所有 © 2017 Mituzhe .广州迷途者网络有限公司</p>
        </div>
        <div class="tail_alliance">
            <p>粤ICP备111111111号 </p>
        </div>
        <div class="tail_copyright">
            <p><img src="img/beianbgs.png"><a>粤公网安备11010102001811号</a></p>
        </div>

    </div>

</div>


</body>
<script>

    var tabs = document.getElementsByClassName("tab");
    var tabContents = document.getElementsByClassName("tabContent");

    function changeTab(index) {
        for (var i = 0; i < tabs.length; i++) {
            tabContents[i].style.display = "none";
            tabs[i].setAttribute("class", "tab");
        }
        tabContents[index].style.display = "block";
        tabs[index].setAttribute("class", "tab action");
    }

    function days(year,month){
        var dayCount;
        now = new Date(year,month, 0);
        dayCount = now.getDate();
        return dayCount;
    }

    addDayUI();

    function addDayUI() {
        var date=document.getElementsByClassName("sign_date")[0].innerText;
        var year=date.split("-")[0];
        var month=date.split("-")[1];;
        //总天数
        var day=days(year,month);
        //每个月第一天的日期
        var firstDay=date+"-01";
        //每个月第一天是星期几
        var fd=new Date(firstDay).getDay();
        //每个月最后一天的日期
        var lastDay=date+"-"+day;
        var ld=new Date(lastDay).getDay();
        //alert(new Date(firstDay).getDay());

        var lastMonth_day=days(year,month-1);
        var sign_showDay=document.getElementsByClassName("sign_showDay")[0];
        var all=42-(fd-1)-day;

        if(fd==0){
            for(var i=lastMonth_day;i>(lastMonth_day-7+1);i--){
                sign_showDay.innerHTML+="<div>"+i+"</div>";
            }
            all-=7;
        }

        for(var i=lastMonth_day;i>(lastMonth_day-fd+1);i--){
            sign_showDay.innerHTML+="<div>"+i+"</div>";
        }
        for(var i=1;i<=day;i++){
            sign_showDay.innerHTML+="<div class='sign_re' onclick='sign()'>"+i+"</div>";
        }
        for(var i=1;i<=all;i++){
            sign_showDay.innerHTML+="<div>"+i+"</div>";
        }
    }

    function changeMonth(s) {
        var date=document.getElementsByClassName("sign_date")[0];
        var year=date.innerText.split("-")[0];
        var month=date.innerText.split("-")[1];
        switch (s){
            case "-":
                if(month==1){
                    month=12;
                    year=parseInt(year)-1;
                }else{
                    month-=1;
                }
            break;

            case "+":
                if(month==12){
                    month=1;
                    year=parseInt(year)+1;
                }else{
                    month=parseInt(month)+1;
                }
                break;
        }
        //alert(month);
        if(month<10){
            date.innerText=year+"-0"+month;
        }else{
            date.innerText=year+"-"+month;
        }

        var sign_showDay=document.getElementsByClassName("sign_showDay")[0];
        sign_showDay.innerHTML = "";
        addDayUI();
    }


    function chanelAtt(btn) {
        btn.parentElement.parentElement.removeChild(btn.parentElement);
    }

    function sign() {
        alert("签到成功");
    }
    

</script>
</html>